<template>
	<view>
		<uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar
		  title="卡市" left-icon="left" @clickLeft="back" right-text="记录" @clickRight="clickRights"/>
		  <view class="content" >
        <view class="card_rule" @click="ruleClick">
          <view class="right">
            规则说明
          </view>
        </view>
        <view class="list" v-for="(item,index) in list" :key="index">
          <view class="text_one">
            <text>{{item.title}}</text>
          </view>
          <view class="text_two">
            <text>{{item.money}}元/{{item.tian}}天</text>
          </view>
          <view class="text_three">
            <text>可用互助场次 {{item.clause}}</text>
          </view>
          <view class="text_four">
            <text>购买时间：{{item.sale_time_s}} - {{item.sale_time_e}}</text>
          </view>
          <view class="text_five">
            <text class="text_fiveone" @click="buyClick(item.id)">购买</text>
          </view>
          <view class="text_six">
            每日库存：{{item.ed_stock}}
          </view>
          <view class="text_seven">
            今日剩余：{{item.td_stock}}
          </view>
        </view>
		  </view>
      <!-- 弹出层 -->
      <u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
        <view class="popup">
          <view class="title">
            这是标题
          </view>
          <view class="content">
            这是规则说明,这是规则说明,这是规则说明,这是规则说明,这是规则说明,这是规则说明,
            这是规则说明,这是规则说明,这是规则说明,这是规则说明,这是规则说明,这是规则说明,
            这是规则说明,这是规则说明,这是规则说明,这是规则说明,这是规则说明,这是规则说明,
          </view>
        </view>
      </u-popup>
	</view>
</template>

<script>
  import {
    getmusthitlist,buyMusthit
  } from '@/api/wincard/index.js'
	export default {
	  data() {
	    return {
        list:[],
        show: false
	    }
	  },
    onLoad() {
    	// 获取获取矿机列表
      this.getList()
    },
	  methods: {
      getList(){
      	// 调用接口
      	getmusthitlist({
      	}).then(res => {
          this.list = res.data
          console.log('成功res=', res)
      	}).catch((e) => {
      	}) 
      },
      // 购买
      buyClick(id){
        this.$ui.show('提示','确认购买',true).then(res =>{
          if(res.confirm){
            buyMusthit({
              id:id
            }).then(res => {
              console.log('成功购买')
              this.$ui.toast(res.msg)
              this.getList()
            }).catch((e) => {
            }) 
          }
        })
      },
      back() {
        uni.navigateBack()
      },
	    clickRights() {
        console.log('这是记录')
        this.$ui.push('/pages/cardService/cardRecord')
	    },
      ruleClick(){
        console.log('规则说明')
        this.show = true
      },
      open() {
        // console.log('open');
      },
      close() {
        this.show = false
        // console.log('close');
      }
	  }
	}
</script>

<style scoped lang="less">
	.content{
		width: 708rpx;
		height: 100%;
		margin: 0 auto;
		.card_rule{
      width: 708rpx;
      height: 21rpx;
      margin-top: 30rpx;
      .right{
        font-size: 22rpx;
        float:right;
        margin-right: 50rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }
		}
		.list{
			margin-top: 34rpx;
      width: 708rpx;
			height: 294rpx;
			background-image: url('@/static/mine/card/cards.png');
			background-size: cover;
			background-repeat: no-repeat;
			position: relative;
			.text_one{
				position: absolute;
				top:29rpx;
				left:45rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			.text_two{
				position: absolute;
				top:33rpx;
				right: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #DCC572;
			}
			.text_three{
				position: absolute;
				top:168rpx;
				left:38rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #DCC572;
			}
			.text_four{
				position: absolute;
        top:231rpx;
				left: 38rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #DCC572;
			}
			.text_five{
				position: absolute;
				top:219rpx;
				right: 20rpx;
				width: 131rpx;
				height: 50rpx;
				text-align: center;
				background: linear-gradient(45deg, #B5A96F 0%, #AE9759 100%);
				border-radius: 25rpx;
				.text_fiveone{
          line-height: 50rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
      .text_six{
        position: absolute;
        top:120rpx;
        right: 20rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
      .text_seven{
        position: absolute;
        top:160rpx;
        right: 20rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
		}
	}
  .popup{
    width: 400rpx;
    height: 600rpx;
    .title{
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .content{
      width: 300rpx;
      height: 500rpx;
      text-indent: 2em;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      overflow-y:scroll;
    }
  }
</style>